<template>
  <el-card class="box-card">
    <template #header>
      <span>
        医疗数据——诊断统计
        <icon-help title="医疗数据——诊断统计" />
      </span>
    </template>
    <div ref="chartRef" :style="{ width: width, height: height }"></div>
  </el-card>
</template>
<script lang="ts" setup>
  import { onMounted, Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import { EChartsOption, number } from 'echarts'
  import { useStore } from 'vuex'
  import iconHelp from '../icon-help/index.vue'
  import type { DiagnosticStatistics } from '@/store/modules/statistics'
  const animationDuration = 300
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, getInstance, resize } = useECharts(
    chartRef as Ref<HTMLDivElement>,
    'macarons'
  )

  const props = defineProps({
    data: {
      type: Object,
      default() {
        return {}
      },
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
    customStyle: {
      // '' :'shadow'
      type: Object,
      default() {
        return {
          isBarShadow: null,
          axisLabelColor: 'gray',
        }
      },
    },
    customConfig: {
      type: Object,
      default: {
        formatterUnit: null,
      },
    },
  })

  const emit = defineEmits(['select'])
  const store = useStore()
  watch(
    () => store.getters.diagnosticStatistics,
    (val) => {
      if (val) {
        const { xAxisData, yAxisData, data } = useInitData(val)
        const { isBarShadow, axisLabelColor } = props.customStyle
        // console.log('axisLabelColor =' + axisLabelColor)
        const { formatterUnit } = props.customStyle
        const seriesDataTmp = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.8)',
            axisPointer: {
              type: isBarShadow ? '' : 'shadow',
            },
            formatter: (params: any) => {
              return (
                params[0].name +
                '<br/>' +
                params[0].marker +
                ' ' +
                params[0].name +
                ' 共' +
                params[0].value +
                '人次'
              )
            },
          },
          // 控制上下左右边距的
          grid: {
            left: '2%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true,
          },
          // 不是横坐标
          xAxis: {
            type: xAxisData ? 'category' : 'value',
            data: xAxisData,
            axisLabel: {
              interval: 0, // 强制显示完整
              rotate: -20, //倾斜度 -90 至 90 默认为0
              fontSize: 11,
              color: axisLabelColor,
            },
          },
          yAxis: {
            type: yAxisData ? 'category' : 'value',
            data: yAxisData,
            axisLabel: {
              interval: 0, // 强制显示完整
              // rotate: -20,//倾斜度 -90 至 90 默认为0
              fontSize: 11,
              color: axisLabelColor,
            },
          },
          series: [
            {
              cursor: isBarShadow ? 'default' : '', // 不显示小手
              name: '数量',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: data,
              animationDuration,
            },
          ],
        }
        setOptions(seriesDataTmp as EChartsOption)
      }
    },
    { immediate: true }
  )

  watch(
    () => store.getters.sidebar.opened,
    async (val) => {
      console.log('diagnosticStatistics size change')
      // await nextTick()
      setTimeout(() => {
        resize()
      }, 500)
    },
    { immediate: true }
  )

  onMounted(() => {
    const myChart = getInstance()
    console.log('myChart =' + myChart)
    myChart?.on('click', function (params) {
      const { data, dataIndex } = params as {
        data: { id: number }
        dataIndex: number
      }
      emit('select', { name: '诊断统计', diagnosis: data.id })
    })
  })

  function useInitData(initData: DiagnosticStatistics): {
    xAxisData: String[]
    data: any
    yAxisData: null
  } {
    const {
      bronchialAsthma,
      bronchialAsthma2,
      recurrentWheezingInPreschool,
      recurrentWheezingInPreschool2,
      coughVariantAsthma,
      coughVariantAsthma2,
      nonAsthma,
      acuteAttackOfBronchialAsthma,
      acuteOnsetOfRecurrentWheezingInPreschool,
    } = initData
    const xAxisData = [
      '支气管哮喘',
      '学龄前反复喘息',
      '支气管哮喘急性发作',
      '支气管哮喘？',
      '学龄前反复喘息急性发作',
      '学龄前反复喘息？',
      '咳嗽变异性哮喘(CVA)',
      '咳嗽变异性哮喘(CVA)？',
      '无哮喘',
    ]

    const data = [
      { value: bronchialAsthma, name: '支气管哮喘', id: 0 },
      { value: recurrentWheezingInPreschool, name: '学龄前反复喘息', id: 2 },
      {
        value: acuteAttackOfBronchialAsthma,
        name: '支气管哮喘急性发作',
        id: 4,
      },
      { value: bronchialAsthma2, name: '支气管哮喘？', id: 1 },
      {
        value: acuteOnsetOfRecurrentWheezingInPreschool,
        name: '学龄前反复喘息急性发作',
        id: 5,
      },
      { value: recurrentWheezingInPreschool2, name: '学龄前反复喘息？', id: 3 },
      { value: coughVariantAsthma, name: '咳嗽变异性哮喘(CVA)', id: 6 },
      { value: coughVariantAsthma2, name: '咳嗽变异性哮喘(CVA)？', id: 7 },
      { value: nonAsthma, name: '无哮喘', id: 8 },
    ]
    return { xAxisData, data, yAxisData: null }
  }
</script>
<style lang="scss" scoped>
  .box-card {
    // width: 50%;
    margin-bottom: 22px;
  }
</style>
